<template>
  <div id="index-header">
    <div class="box">
      <div class="logo">
        <img
          src="https://tm-image.qichacha.com/fa479d6edaf200c15fef3bb08456dbc0.jpg"
          alt=""
        />
        IT在线教育
      </div>
      <!-- 顶部导航开始 -->
      <div class="my-menu">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="/index">首页</el-menu-item>
          <el-submenu index="/speciallesson">
            <template slot="title">课程推荐 </template>
            <el-menu-item index="Python">Python</el-menu-item>
            <el-menu-item index="JAVA">JAVA</el-menu-item>
            <el-menu-item index="Go">Go</el-menu-item>
            <el-submenu index="框架">
              <template slot="title">框架</template>
              <el-menu-item index="Vue">Vue</el-menu-item>
              <el-menu-item index="Django">Django</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="/vip">升级会员</el-menu-item>
          <el-menu-item index="/user">个人中心</el-menu-item>
          <el-menu-item disabled index="/mylesson">待开发</el-menu-item>
        </el-menu>
      </div>
      <!-- 顶部导航结束 -->
      <!-- 搜索开始 -->
      <div class="search">
        <search-input />
      </div>
      <!-- 搜索结束 -->
      <!-- 登录注册开始 -->
      <div class="login-logout">
        <el-button type="text" @click="loginPage">登录</el-button
        ><el-button type="text" @click="loginPage">注册</el-button>
      </div>
      <!-- 登录注册结束 -->
    </div>
  </div>
</template>

<script>
import SearchInput from "../inputs/SearchInput.vue";
export default {
  components: { SearchInput },
  data() {
    return {
      activeIndex: "/index",
      searchLesson: "",
    };
  },
  mounted() {
    var fullPath = window.location.href;
    var routerPathList = ["/vip", "/user", "/speciallesson", "/login"];
    for (let i = 0; i < routerPathList.length; ++i) {
      if (fullPath.includes(routerPathList[i])) {
        this.activeIndex = routerPathList[i];
        return null;
      }
    }
  },
  
  methods: {
    loginPage() {
      this.$router.push("/login");
    },
    handleSelect(key, keyPath) {
      var fullPath = this.$route.fullPath;
      if (!fullPath.includes(key)) {
        // 路由在当前就不进行跳转
        this.activeIndex = key;
        if (keyPath.length == 1) {
          this.$router.push(key);
        } else {
          var path = keyPath[0] + "?lesson=" + keyPath[keyPath.length - 1];
          this.$router.push(path);
        }
      }
    },
  },
};
</script>

<style scoped>
#index-header {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

#index-header .box {
  width: 85%;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
#index-header .my-menu {
  margin: 0 20px;
}

#index-header .logo {
  align-self: center;
  font-size: x-large;
  display: flex;
  display: -webkit-flex;
}

#index-header .logo img {
  width: 30px;
  height: 30px;
  align-self: center;
}
#index-header .login-logout {
  align-self: center;
}
#index-header .search {
  align-self: center;
  margin: 0 20px;
}
</style>